<template>
  <div class="antd-pro-components-article-list-content-index-listContent">
    <div class="description">
      <slot>{{ description }}</slot>
    </div>
    <div class="extra">
      <a-avatar :src="avatar" size="small" />
      <a :href="href">{{ owner }}</a> 发布在
      <a :href="href">{{ href }}</a>
      <em>{{ updateAt | moment }}</em>
    </div>
  </div>
</template>

<script>
export default {
    name: 'ArticleListContent',
    props: {
        prefixCls: {
            type: String,
            default: 'antd-pro-components-article-list-content-index-listContent'
        },
        description: {
            type: String,
            default: ''
        },
        owner: {
            type: String,
            required: true
        },
        avatar: {
            type: String,
            required: true
        },
        href: {
            type: String,
            required: true
        },
        updateAt: {
            type: String,
            required: true
        }
    }
}
</script>

<style lang="less" scoped>
@import '../index.less';

.antd-pro-components-article-list-content-index-listContent {
    .description {
        max-width: 720px;
        line-height: 22px;
    }
    .extra {
        margin-top: 16px;
        color: @text-color-secondary;
        line-height: 22px;

        & /deep/ .ant-avatar {
            position: relative;
            top: 1px;
            width: 20px;
            height: 20px;
            margin-right: 8px;
            vertical-align: top;
        }

        & > em {
            margin-left: 16px;
            color: @disabled-color;
            font-style: normal;
        }
    }
}

@media screen and (max-width: @screen-xs) {
    .antd-pro-components-article-list-content-index-listContent {
        .extra {
            & > em {
                display: block;
                margin-top: 8px;
                margin-left: 0;
            }
        }
    }
}
</style>
